<template>
  <div>
    <div v-if="loading" class="loading">
      正在加载问卷列表...
    </div>
    <div v-else>
      <div class="module" v-for="module in modules" :key="module.paper_id">
        <div class="module-header" @click="toggleModule(module.paper_id)" :class="{'active': module.showContent}">
          <h3>{{ module.title }}</h3>
          <img class="arrow" :class="{'arrow-up': module.showContent, 'arrow-down': !module.showContent}" src="./箭头.png" alt="箭头">
        </div>
        <div v-if="module.showContent" class="module-content">
          <p class="survey-title">{{ module.title }}</p>
          <ul>
            <li>
              <button @click="navigateToResource(module.paper_id)" class="resource-button">问卷</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'SurveyAll',
  data() {
    return {
      modules: [],
      loading: true
    };
  },
  mounted() {
    this.fetchModules();
  },
  methods: {
    fetchModules() {
      axios.get('http://8.138.12.59:1999/survey')
        .then(response => {
          console.log('Response data:', response.data); // 调试信息
          if (response.data.code === 'S0000') {
            this.modules = [response.data.data];
            this.modules.forEach(module => {
              module.showContent = false;
            });
          } else {
            console.error('Error fetching modules:', response.data.msg);
          }
        })
        .catch(error => {
          console.error('Error fetching modules:', error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    toggleModule(id) {
      const module = this.modules.find(module => module.paper_id === id);
      if (module) {
        module.showContent = !module.showContent;
      }
    },
    navigateToResource(resourceId) {
      this.$router.push(`/survey/${resourceId}`);
    }
  }
};
</script>

<style scoped>
.module {
  margin-bottom: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: left;
  overflow: hidden;
}

.module-header {
  background-color: #f1f4f9;
  padding: 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.module-header h3 {
  margin: 0;
  color: #007bff;
}

.arrow {
  width: 18px;
  height: 10px;
  transition: transform 0.3s ease;
}

.arrow-up {
  transform: rotate(180deg);
}

.module-content {
  padding: 20px;
}

.module-content p {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 18px;
}

.survey-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.resource-button {
  background-color: #f0fcff;
  color: #007bff;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.resource-button:hover {
  background-color: #b2ebf2;
}

.loading {
  text-align: center;
  font-size: 16px;
  color: #555;
  padding: 20px 0;
}
</style>